<template>
    <div class="_main">
        <div class="top">
            <span><b>咨询师ID</b></span>
            <input type="text" placeholder="请输入咨询师ID" v-model="queryInfo.consultId" />
            <span><b>用户ID</b></span>
            <input type="text" placeholder="请输入用户ID" v-model="queryInfo.userId" />
            <span><b>预约状态</b></span>
            <input type="text" placeholder="请输入预约状态" v-model="queryInfo.status" />
            <div style="background-color: #3E9AF9;border: solid 1px #3E9AF9;cursor: pointer;" @click="getList">
                <el-icon>
                    <Search />
                </el-icon>
                <button class="but1">搜索</button>
            </div>
            <div style="background-color: white;color: #000;border: solid 1px black;cursor: pointer;" @click="reset">
                <el-icon>
                    <Refresh />
                </el-icon>
                <button class="but2">重置</button>
            </div>
        </div>
        <div class="top2">
            <el-button type="primary" icon="Plus" @click="add" plain>新增</el-button>
            <el-button type="primary" icon="Sort" @click="shrink" blue>展开/折叠</el-button>
        </div>
        <div class="table1">
            <el-table :data="tableData" :style="{ height: num + 'px' }" style="width: 100%">
                <el-table-column prop="id" label="咨询ID" width="80" />
                <el-table-column fixed prop="user.name" label="用户姓名" width="100" />
                <el-table-column prop="createTime" label="创建时间" width="120" />
                <el-table-column prop="user.phone" label="用户电话" width="150" />
                <el-table-column prop="consult.name" label="咨询师姓名" width="120" />
                <el-table-column prop="content" label="咨询内容" width="100">
                    <template #default="scope">
                        <!-- {{ scope.row.content }} -->
                        <el-button link type="primary" v-if="scope.row.content!=null" @click="details(1,scope.row)">
                            <el-icon><Help /></el-icon>
                            <span>详情</span>
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="reply" label="回复内容" width="100">
                    <template #default="scope">
                        <!-- {{ scope.row.reply }} -->
                        <el-button link type="primary" v-if="scope.row.reply!=null" @click="details(2,scope.row)">
                            <el-icon><Help /></el-icon>
                            <span>详情</span>
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="replyTime" label="回复时间" width="120" />
                <el-table-column prop="status" label="咨询状态" width="120">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status==0" type="danger">未完成</el-tag>
                        <el-tag v-if="scope.row.status==1">已回复</el-tag>
                        <el-tag v-if="scope.row.status==2" type="warnning">未评价</el-tag>
                        <el-tag v-if="scope.row.status==3" type="success">已评价</el-tag>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;操作"
                    min-width="150">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="modify(scope.row)">
                            <el-icon>
                                <EditPen />
                            </el-icon>
                            <span>修改</span>
                        </el-button>
                        <el-button link type="primary" size="small" @click="deletes(scope.row.id)">
                            <el-icon>
                                <DeleteFilled />
                            </el-icon>
                            <span>删除</span>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="fenye">
                <el-pagination v-model:current-page="queryInfo.pageNum" v-model:page-size="queryInfo.pageSize"
                    :page-sizes="[1, 10, 50, 100]" size="default" background="false"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
            <el-dialog v-model="saveOrUpdateVisible" :title="saveOrUpdateTitle" width="500">
                <el-form :model="appointment"
                >
                    <el-form-item label="咨询ID" :label-width="formLabelWidth">
                        <el-input v-model="appointment.id" autocomplete="off" style="margin-left: 15px;"/>
                    </el-form-item>
                    <el-form-item label="咨询时间" :label-width="formLabelWidth">
                        <el-input v-model="appointment.createTime" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="咨询内容" :label-width="formLabelWidth">
                        <quill-editor v-model:value="appointment.content"/>
                    </el-form-item>
                    <el-form-item label="回复内容" :label-width="formLabelWidth">
                        <quill-editor v-model:value="appointment.reply"/>
                    </el-form-item>
                    <el-form-item label="回复时间" :label-width="formLabelWidth">
                        <el-date-picker
                            v-model="appointment.replyTime"
                            type="date"
                            placeholder="选择时间"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item label="咨询状态" :label-width="formLabelWidth">
                        <el-input v-model="appointment.status" autocomplete="off" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="close">取消</el-button>
                        <el-button type="primary" @click="saveOrUpdate">
                            确定
                        </el-button>
                    </div>
                </template>
            </el-dialog>
            <el-dialog v-model="detailsVisible" :title="detailsInfor.content!=null?'咨询信息':'回复信息'" width="1000" 
            @close="clearInfor()">
                <quill-editor v-if="detailsInfor.content!=null" v-model:value="detailsInfor.content" />
                <quill-editor v-if="detailsInfor.reply!=null" v-model:value="detailsInfor.reply" />
            </el-dialog>
        </div>
    </div>
</template>
<script setup>
import axios from 'axios';
import { ElMessageBox, ElMessage } from 'element-plus';
import { ref, onMounted } from 'vue';
import QuillEditor from '@/components/QuillEditor.vue';

const total = ref(0);
const detailsVisible = ref(false);
const saveOrUpdateVisible = ref(false);
const num = ref(540);
const shrink = () => {
    if (num.value == 540) {
        num.value = 40
    } else {
        num.value = 540
    }
}

const detailsInfor = ref({
    content: null,
    reply: null
})


function details(n,row) {
    detailsVisible.value = true;
  //console.log(n);
  //console.log(row); 
  if(n==1){
    detailsInfor.value.content=row.content;
  }else{
    detailsInfor.value.reply=row.reply;
  }
}

function clearInfor() {
    detailsInfor.value.content = null;
    detailsInfor.value.reply = null;
}




const appointment = ref({
    id: 0,
    createTime: '',
    content: '',
    consultId: 0,
    userId: 0,
    reply: '',
    replyTime: '',
    status: '',
    consult: {
        id: 0,
        name: '',
    },
    user: {
        id: 0,
        name: '',
        phone: ''
    }
})
const saveOrUpdateTitle = ref('添加预约信息');
const modify = row => {
    saveOrUpdateVisible.value = true;
    saveOrUpdateTitle.value = '修改预约信息';
    appointment.value = row;
}
const add = () => {
    saveOrUpdateVisible.value = true;
    saveOrUpdateTitle.value = '添加预约信息';
    appointment.value = {
        id: 0,
        createTime: '',
        content: ' ',
        consultId: 0,
        userId: 0,
        reply: ' ',
        replyTime: '',
        status: ''
    }
}
const close = () => {
    saveOrUpdateVisible.value = false;
    
    appointment.value = {
        id: 0,
        createTime: '',
        content: '',
        consultId: 0,
        userId: 0,
        reply: '',
        replyTime: '',
        status: ''
    }
}
const saveOrUpdate = () => {
    saveOrUpdateVisible.value = false;
    if (saveOrUpdateTitle.value == '添加预约信息') {
        axios.post('/appointment/insertAppointment', appointment.value)
            .then(response => {
                let result = response.data;
                if (result.code == 1) {
                    getList();
                    ElMessage({
                        message: '添加成功！',
                        type: 'success',
                    })
                } else {
                    ElMessage({
                        message: '添加失败！',
                        type: 'warning',
                    })
                }
            })
    } else {
        axios.put('/appointment/updateAppointmentById', appointment.value)
            .then(response => {
                let result = response.data;
                if (result.code == 1) {
                    getList();
                    ElMessage({
                        message: '修改成功！',
                        type: 'success',
                    })
                } else {
                    ElMessage({
                        message: '修改失败！',
                        type: 'warning',
                    })
                }
            })
    }
    appointment.value = {
        id: 0,
        createTime: '',
        content: '',
        consultId: 0,
        userId: 0,
        reply: '',
        replyTime: '',
        status: ''
    }
}
const reset = () => {
    queryInfo.value = {
        pageNum: 1,
        pageSize: 10,
        consultId: '',
        userId: '',
        status: '',
    }
    getList();
}
const deletes = id => {
    ElMessageBox.confirm(
        '是否确认删除这条数据？',
        '系统提示',
        {
            cancelButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.delete('/appointment/deleteAppointmentById/' + id)
                .then(response => {
                    let result = response.data;
                    if (result.code == 1) {
                        getList();
                        ElMessage({
                            message: '删除成功！',
                            type: 'success',
                        })
                    } else {
                        ElMessage({
                            message: '删除失败！',
                            type: 'warning',
                        })
                    }
                })
        })
        .catch(() => { })
}
const handleSizeChange = (val) => {
    queryInfo.value.pageSize = val;
    queryInfo.value.pageNum = 1;
    getList();
}
const handleCurrentChange = (val) => {
    queryInfo.value.pageNum = val;
    getList();
}
const queryInfo = ref({
    pageNum: 1,
    pageSize: 10,
    consultId: '',
    userId: '',
    status: '',
})
onMounted(() => {
    // console.log('onMounted');
    getList();
})
const tableData = ref([])
const getList = () => {
    axios.get('/appointment/selectAppointmentAll', {
        params: queryInfo.value
    })
        .then(response => {
            let result = response.data;
            if (result.code == 1) {
                total.value = result.data.total;
                tableData.value = result.data.list;
            } else {
                console.log(error);
            }
        })
}
</script>
<style scoped>
._main {
    width: 1190px;
    height: 690px;
    position: relative;
    top: 0px;
    left: 0px;
}

.top {
    width: 950px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top>input {
    width: 180px;
    height: 25px;
    border: solid 1px #E6E8ED;
    border-radius: 5px;
    outline-color: #1890FF;
}

select {
    width: 150px;
    height: 28px;
    border: solid 1px #E6E8ED;
    border-radius: 5px;
    outline-color: #1890FF;
}

.top>div {
    background-color: blue;
    height: 25px;
    width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 5px;
}

button {
    border: none;
}

.but1 {
    color: white;
    background-color: #3E9AF9;
}

.but2 {
    color: black;
    background-color: white;
}

.top2 {
    width: 220px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    left: 30px;
}

.table1 {

    margin-top: 40px;
}

hr {
    padding: 5px;
    border: none;
}

.fenye {
    position: absolute;
    top: 675px;
    left: 320px;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

  /**设置富文本编辑器的最小高度，注意style中不能使用scoped **/
  .ql-container{
    min-height: 600px;
  }
</style>